<template>
	<view class="holderHome">
		<view class="holderImg">
			<view class="backImg-left">
				<view @tap="back" class="backImg-left">
					<image src="../../static/detail/back.png" mode="widthFix"></image>
				</view>
				<view style="padding-left: 40upx;font-size: 32upx;line-height:42upx;">
					持有者主页
				</view>
			</view>
			<view class="box">
				<view class="followBox">
					<view class="focusPeople">
						<view class="focusPeopleImg">
							<image v-if="list.length>0" :src="pathImg + list[0].issuerHead" mode=""></image>
						</view>
						<view class="focusPeopleInfo">
							<view class="focusPeopleName">
								Tuesday
							</view>
							<view class="focusPeopleNumber">
								粉丝 666
							</view>
						</view>
					</view>
					<view v-if="followShow" class="follow" @tap="followClick">
						<view class="followAdd">
							<image class="followAddImg" src="../../static/detail/cross.png" mode=""></image>
						</view>
						<view class="followText">
							关注
						</view>
					</view>
					<view v-else class="alreadyFollow" @tap="cancelFollow">
						已关注
					</view>
				</view>
				<view class="text">
					国内影响力巨大的Office资深导师，超过100万人正在和秋叶一起学PPT！用风趣幽默的方式手把手教你轻松搞定Office，提升你的办公效率，让领导亲身感受一种无可辩
				</view>
			</view>
			
		</view>
		<view class="list" v-if="list.length>0">
			<view class="tabs">
				<u-tabs
				:list="list1"
				@tap="click"
				lineColor="#A61403"
				:activeStyle="{
					color: '#A61403',
					fontSize:'30upx',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#FFFFFF',
					fontSize:'30upx',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 20px; padding-right: 20px; height: 38px;"
				></u-tabs>
			</view>
			<scroll-view @scrolltolower="scrolltolower" scroll-y="true" style="width: 100%;height: 70vh;padding-bottom: 200upx;">
				<view class="listBox">
					<view @tap="navTo('/pages/detail/seriesDetail?id='+item.id+'&path=home',index)" class="listItems" v-for="(item,index) in list" :key="index">
						<view class="img">
							<image style="width: 295upx;height: 295upx;" :src="pathImg + item.coverFile" mode=""></image>
						</view>
						<view class="seriesName">
							{{item.seriesName}}
						</view>
						<view class="price">
							￥{{item.price}}
						</view>
					</view>
					<view class="msg" v-if="isEnd">— 已经到底啦! —</view>
				</view>
			</scroll-view>
		</view>
		<view v-else class="noListBox">
			<view class="tabs">
				<u-tabs
				:list="list1"
				@tap="click"
				lineColor="#A61403"
				:activeStyle="{
					color: '#A61403',
					fontSize:'30upx',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#FFFFFF',
					fontSize:'30upx',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 20px; padding-right: 20px; height: 38px;"
				></u-tabs>
			</view>
			<view class="noList">
				<image class="noListImg" src="../../static/noData.png" mode="widthFix"></image>
				
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal
		:showCancelButton="true"
		:show="showModal"
		:title="title"
		:content='content'
		@confirm="cancel"
		@cancel="giveUp"
		></u-modal>
	</view>
</template>

<script>
	import {
		PATH_IMG,
		BASE_API
	} from '@/common/config.js'
	
	import {
		getNftseriesList
	} from "@/api/home.js"
	export default {
		data() {
			return {
				isEnd: false,
				list: [],
				followState:0,
				list1: [{
					name: '发售中',
				}, {
					name: '持有NFT',
				}],
				followState:true,
				showModal: false,
				followShow:true,
				title:'',
				content:'确定取消关注吗?',
				nftTotal: 0,
				obj:{
					page:1,
					pageSize:4
				}
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			click(item) {
				// console.log('item', item);
			},
			// 点击关注
			followClick(){
				this.followShow = false
				this.$u.toast('关注成功')
			},
			// 取消关注
			cancelFollow(){
				this.showModal = true
			},
			// 确定取消关注
			cancel(){
				this.followShow = true
				this.showModal = false
				this.$u.toast('已取消关注')
			},
			giveUp(){
				this.showModal = false
			},
			navTo(url, index) {
				console.log(this.list)
				uni.setStorage({
					key: 'seriesDetails',
					data: this.list[index]
				});
				uni.navigateTo({
					url
				})
			},
			// 到达底部
			scrolltolower(){
				this.obj.page++;
				getNftseriesList(this.obj).then(res=>{
					console.log(res);
					if (res.data.success) {
						if (res.data.obj.length == 0 || res.data.obj.length == 1) {
							this.isEnd = true
						}
						if (res.data.obj.length == 0) {
							return
						}
						let list = res.data.obj.filter(item => {
							if (this.moment(new Date()).isBefore(item.endDate)) {
								return true
							}
						})
						let newList = list.map((item, index) => {
							item.labelList = item.label.split(',')
							item.issuerNameList = item.issuerName.split('；')
							item.issuerHeadList = item.issuerHead.split(',')
							item.issuerHeadList = item.issuerHeadList.map(item => {
								item = this.pathImg + item
								return item
							})
							item.describeFileList = item.describeFile.split(',')
							item.izStart = null
							item.izEnd = null
							item.countdown = null
							item.timeData = {
								days: 0,
								hours: 0,
								milliseconds: 0,
								minutes: 0,
								seconds: 0
							}
					
							// 判断是否开始
							if (this.moment(new Date()).isBefore(item.startDate)) {
								item.izStart = false
								item.countdown = this.moment(item.startDate).diff(new Date().getTime())
							} else if (this.moment(new Date()).isAfter(item.startDate)) {
								// 判断是否结束
								if (this.moment(item.endDate).format('YYYY-MM-DD') == '2099-01-01') {
									item.izEnd = 1
								} else if (this.moment(new Date()).isBefore(item.endDate)) {
									item.izEnd = false
									item.countdown = this.moment(item.endDate).diff(new Date().getTime())
								} else {
									item.izEnd = true
								}
								item.izStart = true
							}
							return item
						})
						// this.page += 1
						// console.log(newList)
						if (page == 1) {
							this.list = [...newList]
							console.log(this.list);
						} else {
							this.list = [...this.list, ...newList]
							console.log(this.list);
						}
					}
				})
			}
		},
		onLoad() {
			getNftseriesList(this.obj).then(res=>{
				console.log(res);
				if(res.data.success){
					
					let newList = res.data.obj.map((item, index) => {
						item.describeFileList = item.describeFile.split(',')
						return item
					})
					console.log(newList)
					this.list = newList
				}
			})
		}
	}
</script>

<style lang="less" scoped>
	.holderHome{
		// background: #060606;
		overflow: hidden;
		.holderImg{
			width: 100vw;
			height: 500upx;
			padding: 0.2upx;
			.bgImg{
				position: fixed;
				z-index: -2;
				top: 0;
				left: 0;
				width: 100%;
				height: 560upx;
			}
			.backImg-left {
				position: fixed;
				z-index: 999;
				left: 40upx;
				top: 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				
				image {
					width: 20upx;
					height: 45upx;
				}
			}
			.box{
				margin-top: 160upx;
				padding:0 40upx;
				.followBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 40upx;
					.focusPeople{
						display: flex;
						align-items: center;
						height: 80upx;
						.focusPeopleImg{
							width: 80upx;
							height: 80upx;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.focusPeopleInfo{
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							margin-left: 20upx;
							.focusPeopleName{
								height: 28upx;
								font-size: 28upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #FFFFFF;
							}
							.focusPeopleNumber{
								height: 24upx;
								font-size: 24upx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #ACACAC;
							}
						}
					}
					.follow{
						width: 116upx;
						height: 48upx;
						background: #A61403;
						border-radius: 10upx;
						font-size: 24upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						display: flex;
						justify-content: center;
						align-items: center;
						.followAdd{
							height: 100%;
							width: 22upx;
							display: flex;
							align-items: center;
							justify-content: center;
							.followAddImg{
								width: 18upx;
								height: 18upx;
							}
						}
						.followText{
							margin-left: 6upx;
							margin-bottom: 2upx;
						}
					}
					
					.alreadyFollow{
						width: 116upx;
						color: #fff;
						line-height: 48upx;
						text-align: center;
						border: 4upx solid #ADADAD;
						border-radius: 10upx;
						font-size: 24upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
					}
					
				}
				.text{
					text-indent:2em;
					font-size: 28upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #ACACAC;
					line-height: 40upx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}
			
		}
		.list{
			height: calc(100vh - 500upx);
			padding: 0.1upx;
			width: 100vw;
			border-radius: 40upx 40upx 0 0;
			background: #060606;
			.tabs{
				padding: 0.1upx;
				margin-top: 60upx;
				margin: 40upx;
			}
			.listBox{
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin:  40upx;
				padding-bottom: 50upx;
				.msg {
					width: 100%;
					text-align: center;
					color: rgba(255, 255, 255, .5);
					font-size: 24upx;
					margin-top: 30upx;
					// padding-bottom: 100upx;
				}
				.listItems{
					// background-image: url(../../static/user/kuang.png);
					// background-position: center center;
					// background-size: 100% 100%;
					// background-repeat: no-repeat;
					width: 304upx;
					height: 419upx;
					color: #fff;
					border: 2upx solid #9E9E9E;
					margin-bottom:  40upx;
					padding: 11upx;
					.img{
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.seriesName{
						font-size: 26upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 16upx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.price{
						margin-top: 12upx;
						font-size: 24upx;
						font-family: Arial;
						font-weight: 400;
						color: #A61403;
					}
				}
			}
			
		}
		.noListBox {
			position: relative;
			height: calc(100vh - 500upx);
			padding: 0.1upx;
			width: 100vw;
			border-radius: 40upx 40upx 0 0;
			background: #060606;
			.tabs{
				padding: 0.1upx;
				margin-top: 60upx;
				margin: 40upx;
			}
			.noList {
				width: 360upx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				.noListImg{
					width: 360upx;
				}
			}
		
			.noListMsg {
				padding: 36upx 0;
				width: 100%;
				text-align: center;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 30upx;
				line-height: 42upx;
				text-align: center;
				color: #AAAAAA;
				opacity: 0.6;
				margin-top: 150upx;
			}
		}
		.u-modal__content{
			text-align: center;
		}
		::v-deep .u-modal__content__text{
			text-align: center;
			padding: 50upx 0;
		}
	}
</style>
